import React, { Component } from 'react';
import BaseComponent from '@/components/BaseComponent';
import styles from './index.less';
import { Button, Card, Spin } from 'antd';
import StandardTable from '@/components/StandardTable';
import { connect } from 'dva';
import SearchForm from '@/pages/DataStatistics/ReportProgress/SearchForm';

/**
 * 月进度表
 */
@connect(({ user, monthlyschedule, loading }) => ({
  currentUser: user.currentUser,
  data: monthlyschedule.data,
  isPreparing: loading.effects['monthlyschedule/getPageData'],
}))
class MonthlySchedule extends BaseComponent {
  constructor(props) {
    super(props);

    this.state = {
      //城市集合
      cities: [],
      //区县集合
      districtAndStreet: [],
      //搜索条件
      searchCondition: {},
      //初始化数据
      data: [],
      // 被选中的行
      selectedRows: [],
      // 被选中后的行的id
      selectedRowKeys: [],
    };
  }

  columns = [
    {
      title: '省份',
      width: 100,
      align: 'center',
      dataIndex: 'province_name',
      key: 'province_name',
      fixed: 'left',
    },
    {
      title: '城市',
      width: 100,
      align: 'center',
      dataIndex: 'city_name',
      key: 'city_name',
      fixed: 'left',
    },
    {
      title: '区县',
      width: 100,
      align: 'center',
      dataIndex: 'region_name',
      key: 'region_name',
      fixed: 'left',
    },
    {
      title: '上报机构',
      // width: 100,
      align: 'center',
      dataIndex: 'org_name',
      key: 'org_name',
      fixed: 'left',
    },

    {
      title: '一月',
      width: 60,
      align: 'center',
      dataIndex: 'jan_count',
      key: 'jan_count',
    },
    {
      title: '二月',
      width: 60,
      align: 'center',
      dataIndex: 'feb_count',
      key: 'feb_count',
    },
    {
      title: '三月',
      width: 60,
      align: 'center',
      dataIndex: 'mar_count',
      key: 'mar_count',
    },
    {
      title: '四月',
      width: 60,
      align: 'center',
      dataIndex: 'apr_count',
      key: 'apr_count',
    },
    {
      title: '五月',
      width: 60,
      align: 'center',
      dataIndex: 'may_count',
      key: 'may_count',
    },
    {
      title: '六月',
      width: 60,
      align: 'center',
      dataIndex: 'jun_count',
      key: 'jun_count',
    },
    {
      title: '七月',
      width: 60,
      align: 'center',
      dataIndex: 'jul_count',
      key: 'jul_count',
    },
    {
      title: '八月',
      width: 60,
      align: 'center',
      dataIndex: 'aug_count',
      key: 'aug_count',
    },
    {
      title: '九月',
      width: 60,
      align: 'center',
      dataIndex: 'sept_count',
      key: 'sept_count',
    },
    {
      title: '十月',
      width: 60,
      align: 'center',
      dataIndex: 'oct_count',
      key: 'oct_count',
    },
    {
      title: '十一月',
      width: 80,
      align: 'center',
      dataIndex: 'nov_count',
      key: 'nov_count',
    },
    {
      title: '十二月',
      width: 80,
      align: 'center',
      dataIndex: 'dec_count',
      key: 'dec_count',
    },
    {
      title: '合计',
      key: 'total',
      width: 100,
      fixed: 'right',
    },
  ];

  render() {
    const { data } = this.state;

    const { isPreparing } = this.props;

    return (
      <div className={styles.monthlyschedule}>
        <Card bordered={true} title={'月进度表'}>
          <SearchForm
            cityList={this.state.cities}
            districtAndStreetList={this.state.districtAndStreet}
            onSearchClick={this.handleOnSearchClick}
            onResetClick={this.handleOnResetClick}
            onExportClick={this.handleOnExportClick}
            OnSelectedCity={this.handleOnSelectedCity}
          ></SearchForm>
        </Card>

        <Card bordered={true} className={styles.contentBox}>
          {isPreparing ? (
            <div className={styles.spinBox}>
              <Spin />
            </div>
          ) : (
            <StandardTable
              hasSelection={false}
              onChange={this.handleBasicTableChange}
              selectedRows={[]}
              loading={false}
              data={data}
              columns={this.columns}
              rowKey="id"
              scroll={{ x: true }}
            />
          )}
        </Card>
      </div>
    );
  }
}

export default MonthlySchedule;
